<template>
  <view class="grid grid-cols-5 gap-2 justify-between shadow p-4 py-8 bg-white">
    <view class="col-span-1">
      <image
        style="width: 108rpx; height: 108rpx;"
        src="/static/icons/icon-water.png"
      ></image>
    </view>
    <view class="col-span-4 flex flex-col justify-between self-stretch">
      <view>
        <text class="power-title">{{ device.name }}</text>
        <text class="power-location">{{ device.roomNumber }}</text>
      </view>
      <view class="flex items-center">
        <text class="power-text">{{ device.properties.water }}</text>
        <text class="power-unit">m³</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    device: {
      type: Object,
      default: {}
    }
  },
}
</script>

<style lang="scss" scoped>
.power-title {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 400;
  // color: rgba(23, 153, 249, 1);
  opacity: 1;
}
.power-text {
  font-size: 36rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(40, 42, 51, 1);
  opacity: 1;
  margin-left: 6rpx;
}
.power-unit {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 33px;
  color: rgba(128, 134, 149, 1);
  opacity: 1;
  margin-left: 6rpx;
}

.power-location {
  margin-left: 18rpx;
  color: #808695;
  width:129rpx;
  height:40rpx;
  font-size:28rpx;
  font-family:PingFang SC;
  font-weight:400;
  line-height:40px;
}
</style>
